<template>
  <div class="service-page">
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <div class="header-content">
          <h1 class="page-title">客户服务</h1>
          <p class="page-description">
            我们致力于为您提供全方位的客户服务支持，让您的使用体验更加顺畅
          </p>
        </div>
      </div>
    </section>

    <!-- 服务导航 -->
    <section class="service-nav">
      <div class="container">
        <div class="nav-tabs">
          <div 
            class="nav-tab" 
            v-for="tab in serviceTabs" 
            :key="tab.id"
            :class="{ active: activeTab === tab.id }"
            @click="switchTab(tab.id)"
          >
            <div class="tab-icon">
              <el-icon><component :is="tab.icon" /></el-icon>
            </div>
            <div class="tab-content">
              <h3 class="tab-title">{{ tab.title }}</h3>
              <p class="tab-description">{{ tab.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 在线客服 -->
    <section v-if="activeTab === 'chat'" class="chat-section">
      <div class="container">
        <div class="chat-layout">
          <!-- 客服信息 -->
          <div class="chat-sidebar">
            <div class="service-info">
              <h3 class="info-title">在线客服</h3>
              <div class="service-hours">
                <div class="hour-item">
                  <span class="hour-label">工作日：</span>
                  <span class="hour-time">9:00 - 18:00</span>
                </div>
                <div class="hour-item">
                  <span class="hour-label">周末：</span>
                  <span class="hour-time">10:00 - 17:00</span>
                </div>
              </div>
              <div class="contact-methods">
                <div class="contact-item">
                  <el-icon><Phone /></el-icon>
                  <span>400-123-4567</span>
                </div>
                <div class="contact-item">
                  <el-icon><Message /></el-icon>
                  <span>service@ikeysoft.cn</span>
                </div>
                <div class="contact-item">
                  <el-icon><ChatDotRound /></el-icon>
                  <span>微信客服</span>
                </div>
              </div>
            </div>

            <!-- 快捷问题 -->
            <div class="quick-questions">
              <h4 class="quick-title">常见问题</h4>
              <div class="question-list">
                <div 
                  class="question-item" 
                  v-for="question in quickQuestions" 
                  :key="question.id"
                  @click="sendQuickQuestion(question.text)"
                >
                  {{ question.text }}
                </div>
              </div>
            </div>
          </div>

          <!-- 聊天区域 -->
          <div class="chat-main">
            <div class="chat-header">
              <div class="agent-info">
                <el-avatar :size="40" src="/avatar-service.png">客服</el-avatar>
                <div class="agent-details">
                  <h4 class="agent-name">智能客服小助手</h4>
                  <span class="agent-status online">在线</span>
                </div>
              </div>
              <div class="chat-actions">
                <el-button text @click="clearChat">
                  <el-icon><Delete /></el-icon>
                  清空对话
                </el-button>
              </div>
            </div>

            <div class="chat-messages" ref="chatMessages">
              <div 
                class="message" 
                v-for="message in chatMessages" 
                :key="message.id"
                :class="{ 'user-message': message.type === 'user', 'bot-message': message.type === 'bot' }"
              >
                <div class="message-avatar">
                  <el-avatar :size="32" v-if="message.type === 'bot'" src="/avatar-service.png">客服</el-avatar>
                  <el-avatar :size="32" v-else>您</el-avatar>
                </div>
                <div class="message-content">
                  <div class="message-bubble">
                    <div class="message-text" v-html="message.content"></div>
                    <div class="message-time">{{ formatTime(message.timestamp) }}</div>
                  </div>
                </div>
              </div>
              <div v-if="isTyping" class="message bot-message">
                <div class="message-avatar">
                  <el-avatar :size="32" src="/avatar-service.png">客服</el-avatar>
                </div>
                <div class="message-content">
                  <div class="message-bubble">
                    <div class="typing-indicator">
                      <span></span><span></span><span></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="chat-input">
              <div class="input-area">
                <el-input
                  v-model="currentMessage"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入您的问题..."
                  @keydown.enter.prevent="sendMessage"
                  resize="none"
                />
                <div class="input-actions">
                  <el-button @click="attachFile">
                    <el-icon><Paperclip /></el-icon>
                  </el-button>
                  <el-button type="primary" @click="sendMessage" :disabled="!currentMessage.trim()">
                    发送
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- FAQ知识库 -->
    <section v-if="activeTab === 'faq'" class="faq-section">
      <div class="container">
        <div class="faq-layout">
          <!-- 搜索和分类 -->
          <div class="faq-header">
            <div class="search-area">
              <el-input
                v-model="faqSearch"
                placeholder="搜索问题关键词..."
                size="large"
                clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
            <div class="category-filter">
              <el-button 
                v-for="category in faqCategories" 
                :key="category.id"
                :type="selectedCategory === category.id ? 'primary' : ''"
                @click="filterByCategory(category.id)"
              >
                {{ category.name }}
              </el-button>
            </div>
          </div>

          <!-- FAQ列表 -->
          <div class="faq-content">
            <div class="faq-stats">
              <span class="stats-text">找到 {{ filteredFAQs.length }} 个相关问题</span>
            </div>
            
            <div class="faq-list">
              <div class="faq-item" v-for="faq in filteredFAQs" :key="faq.id">
                <div class="faq-question" @click="toggleFAQ(faq.id)">
                  <div class="question-content">
                    <h3 class="question-title">{{ faq.question }}</h3>
                    <div class="question-meta">
                      <span class="category-tag">{{ getCategoryName(faq.categoryId) }}</span>
                      <span class="view-count">{{ faq.views }} 次查看</span>
                    </div>
                  </div>
                  <div class="question-toggle">
                    <el-icon :class="{ 'rotated': expandedFAQs.includes(faq.id) }">
                      <ArrowDown />
                    </el-icon>
                  </div>
                </div>
                
                <el-collapse-transition>
                  <div v-show="expandedFAQs.includes(faq.id)" class="faq-answer">
                    <div class="answer-content" v-html="faq.answer"></div>
                    <div class="answer-actions">
                      <div class="helpful-section">
                        <span class="helpful-text">这个回答对您有帮助吗？</span>
                        <el-button text @click="rateFAQ(faq.id, true)">
                          <el-icon><Check /></el-icon>
                          有帮助 ({{ faq.helpful }})
                        </el-button>
                        <el-button text @click="rateFAQ(faq.id, false)">
                          <el-icon><Close /></el-icon>
                          没帮助 ({{ faq.unhelpful }})
                        </el-button>
                      </div>
                      <el-button text type="primary" @click="contactSupport(faq.question)">
                        仍需帮助？联系客服
                      </el-button>
                    </div>
                  </div>
                </el-collapse-transition>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 工单系统 -->
    <section v-if="activeTab === 'ticket'" class="ticket-section">
      <div class="container">
        <div class="ticket-layout">
          <!-- 工单操作 -->
          <div class="ticket-header">
            <div class="header-left">
              <h2 class="section-title">工单管理</h2>
              <p class="section-description">提交技术支持请求，跟踪问题解决进度</p>
            </div>
            <div class="header-actions">
              <el-button type="primary" @click="showCreateTicket = true">
                <el-icon><Plus /></el-icon>
                创建工单
              </el-button>
            </div>
          </div>

          <!-- 工单筛选 -->
          <div class="ticket-filters">
            <div class="filter-group">
              <label class="filter-label">状态：</label>
              <el-select v-model="ticketStatusFilter" placeholder="全部状态" clearable>
                <el-option label="全部" value="" />
                <el-option label="待处理" value="pending" />
                <el-option label="处理中" value="processing" />
                <el-option label="已解决" value="resolved" />
                <el-option label="已关闭" value="closed" />
              </el-select>
            </div>
            <div class="filter-group">
              <label class="filter-label">优先级：</label>
              <el-select v-model="ticketPriorityFilter" placeholder="全部优先级" clearable>
                <el-option label="全部" value="" />
                <el-option label="低" value="low" />
                <el-option label="中" value="medium" />
                <el-option label="高" value="high" />
                <el-option label="紧急" value="urgent" />
              </el-select>
            </div>
            <div class="filter-group">
              <label class="filter-label">类型：</label>
              <el-select v-model="ticketTypeFilter" placeholder="全部类型" clearable>
                <el-option label="全部" value="" />
                <el-option label="技术支持" value="technical" />
                <el-option label="功能请求" value="feature" />
                <el-option label="Bug报告" value="bug" />
                <el-option label="账户问题" value="account" />
              </el-select>
            </div>
          </div>

          <!-- 工单列表 -->
          <div class="ticket-list">
            <div class="ticket-item" v-for="ticket in filteredTickets" :key="ticket.id">
              <div class="ticket-header">
                <div class="ticket-info">
                  <h3 class="ticket-title">{{ ticket.title }}</h3>
                  <div class="ticket-meta">
                    <span class="ticket-id">#{{ ticket.id }}</span>
                    <span class="ticket-date">{{ formatDate(ticket.createdAt) }}</span>
                  </div>
                </div>
                <div class="ticket-status">
                  <el-tag :type="getStatusType(ticket.status)">{{ getStatusText(ticket.status) }}</el-tag>
                  <el-tag :type="getPriorityType(ticket.priority)" effect="plain">{{ getPriorityText(ticket.priority) }}</el-tag>
                </div>
              </div>
              
              <div class="ticket-content">
                <p class="ticket-description">{{ ticket.description }}</p>
                <div class="ticket-details">
                  <span class="detail-item">
                    <el-icon><User /></el-icon>
                    {{ ticket.assignee || '未分配' }}
                  </span>
                  <span class="detail-item">
                    <el-icon><Folder /></el-icon>
                    {{ getTypeText(ticket.type) }}
                  </span>
                  <span class="detail-item">
                    <el-icon><Clock /></el-icon>
                    最后更新：{{ formatDate(ticket.updatedAt) }}
                  </span>
                </div>
              </div>
              
              <div class="ticket-actions">
                <el-button text @click="viewTicket(ticket.id)">
                  <el-icon><View /></el-icon>
                  查看详情
                </el-button>
                <el-button text v-if="ticket.status !== 'closed'" @click="updateTicket(ticket.id)">
                  <el-icon><Edit /></el-icon>
                  更新
                </el-button>
                <el-button text type="danger" v-if="ticket.status !== 'closed'" @click="closeTicket(ticket.id)">
                  <el-icon><Close /></el-icon>
                  关闭
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 创建工单对话框 -->
    <el-dialog v-model="showCreateTicket" title="创建工单" width="600px">
      <el-form :model="newTicket" :rules="ticketRules" ref="ticketForm" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="newTicket.title" placeholder="请输入工单标题" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="newTicket.type" placeholder="请选择工单类型">
            <el-option label="技术支持" value="technical" />
            <el-option label="功能请求" value="feature" />
            <el-option label="Bug报告" value="bug" />
            <el-option label="账户问题" value="account" />
          </el-select>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="newTicket.priority" placeholder="请选择优先级">
            <el-option label="低" value="low" />
            <el-option label="中" value="medium" />
            <el-option label="高" value="high" />
            <el-option label="紧急" value="urgent" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input 
            v-model="newTicket.description" 
            type="textarea" 
            :rows="4" 
            placeholder="请详细描述您遇到的问题或需求"
          />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            multiple
            :auto-upload="false"
            :file-list="newTicket.attachments"
          >
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持jpg/png/pdf文件，且不超过10MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateTicket = false">取消</el-button>
          <el-button type="primary" @click="createTicket">创建工单</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 联系方式 -->
    <section class="contact-section">
      <div class="container">
        <div class="contact-content">
          <div class="contact-text">
            <h2 class="contact-title">其他联系方式</h2>
            <p class="contact-description">
              除了在线服务，您还可以通过以下方式联系我们
            </p>
          </div>
          <div class="contact-methods">
            <div class="method-item">
              <div class="method-icon">
                <el-icon><Phone /></el-icon>
              </div>
              <div class="method-content">
                <h3 class="method-title">电话支持</h3>
                <p class="method-description">400-123-4567</p>
                <span class="method-time">工作日 9:00-18:00</span>
              </div>
            </div>
            <div class="method-item">
              <div class="method-icon">
                <el-icon><Message /></el-icon>
              </div>
              <div class="method-content">
                <h3 class="method-title">邮件支持</h3>
                <p class="method-description">service@ikeysoft.cn</p>
                <span class="method-time">24小时内回复</span>
              </div>
            </div>
            <div class="method-item">
              <div class="method-icon">
                <el-icon><Location /></el-icon>
              </div>
              <div class="method-content">
                <h3 class="method-title">现场支持</h3>
                <p class="method-description">北京市朝阳区xxx大厦</p>
                <span class="method-time">预约上门服务</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  ChatDotRound,
  QuestionFilled,
  DocumentCopy,
  Phone,
  Message,
  Delete,
  Paperclip,
  Search,
  ArrowDown,
  Check,
  Close,
  Plus,
  User,
  Folder,
  Clock,
  View,
  Edit,
  UploadFilled,
  Location
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 服务标签页
const activeTab = ref('chat')
const serviceTabs = [
  {
    id: 'chat',
    title: '在线客服',
    description: '实时在线咨询，快速解决问题',
    icon: 'ChatDotRound'
  },
  {
    id: 'faq',
    title: 'FAQ知识库',
    description: '常见问题解答，自助查找答案',
    icon: 'QuestionFilled'
  },
  {
    id: 'ticket',
    title: '工单系统',
    description: '提交技术支持请求，跟踪处理进度',
    icon: 'DocumentCopy'
  }
]

// 在线客服相关
const currentMessage = ref('')
const chatMessages = ref([
  {
    id: 1,
    type: 'bot',
    content: '您好！欢迎使用IKeySoft客户服务，我是您的专属客服助手。请问有什么可以帮助您的吗？',
    timestamp: new Date()
  }
])
const isTyping = ref(false)
const chatMessages_ref = ref()

// 快捷问题
const quickQuestions = [
  { id: 1, text: '如何重置密码？' },
  { id: 2, text: '产品价格咨询' },
  { id: 3, text: '技术支持联系方式' },
  { id: 4, text: '账户升级问题' },
  { id: 5, text: '数据导入导出' }
]

// FAQ相关
const faqSearch = ref('')
const selectedCategory = ref('')
const expandedFAQs = ref([])

const faqCategories = [
  { id: '', name: '全部' },
  { id: 'account', name: '账户管理' },
  { id: 'product', name: '产品功能' },
  { id: 'billing', name: '计费问题' },
  { id: 'technical', name: '技术支持' },
  { id: 'security', name: '安全相关' }
]

const faqList = [
  {
    id: 1,
    question: '如何重置我的账户密码？',
    answer: `
      <p>您可以通过以下步骤重置密码：</p>
      <ol>
        <li>访问登录页面，点击"忘记密码"链接</li>
        <li>输入您的注册邮箱地址</li>
        <li>检查邮箱中的重置密码邮件</li>
        <li>点击邮件中的重置链接</li>
        <li>设置新密码并确认</li>
      </ol>
      <p><strong>注意：</strong>重置链接有效期为24小时，请及时完成密码重置。</p>
    `,
    categoryId: 'account',
    views: 1234,
    helpful: 89,
    unhelpful: 12
  },
  {
    id: 2,
    question: '如何升级我的账户套餐？',
    answer: `
      <p>升级账户套餐的方法：</p>
      <ol>
        <li>登录您的账户</li>
        <li>进入"账户设置" > "套餐管理"</li>
        <li>选择您需要的套餐类型</li>
        <li>确认升级并完成支付</li>
      </ol>
      <p>升级后的功能将立即生效。如需帮助，请联系客服。</p>
    `,
    categoryId: 'account',
    views: 856,
    helpful: 67,
    unhelpful: 8
  },
  {
    id: 3,
    question: '产品支持哪些数据格式导入？',
    answer: `
      <p>我们的产品支持以下数据格式：</p>
      <ul>
        <li><strong>Excel文件：</strong>.xlsx, .xls</li>
        <li><strong>CSV文件：</strong>.csv</li>
        <li><strong>JSON文件：</strong>.json</li>
        <li><strong>XML文件：</strong>.xml</li>
        <li><strong>数据库：</strong>MySQL, PostgreSQL, SQL Server</li>
      </ul>
      <p>单次导入文件大小限制为100MB，如需导入更大文件，请联系技术支持。</p>
    `,
    categoryId: 'product',
    views: 2341,
    helpful: 156,
    unhelpful: 23
  },
  {
    id: 4,
    question: '如何查看我的账单和付费记录？',
    answer: `
      <p>查看账单的步骤：</p>
      <ol>
        <li>登录您的账户</li>
        <li>点击右上角头像，选择"账户设置"</li>
        <li>在左侧菜单中选择"账单管理"</li>
        <li>您可以查看所有的付费记录和发票</li>
      </ol>
      <p>您也可以下载PDF格式的发票用于报销。</p>
    `,
    categoryId: 'billing',
    views: 1567,
    helpful: 98,
    unhelpful: 15
  },
  {
    id: 5,
    question: 'API调用频率限制是多少？',
    answer: `
      <p>不同套餐的API调用限制：</p>
      <ul>
        <li><strong>基础版：</strong>1000次/小时</li>
        <li><strong>专业版：</strong>5000次/小时</li>
        <li><strong>企业版：</strong>20000次/小时</li>
        <li><strong>定制版：</strong>无限制</li>
      </ul>
      <p>超出限制后将返回429错误码，建议合理控制调用频率。</p>
    `,
    categoryId: 'technical',
    views: 3456,
    helpful: 234,
    unhelpful: 45
  },
  {
    id: 6,
    question: '数据安全如何保障？',
    answer: `
      <p>我们采用多层安全措施保护您的数据：</p>
      <ul>
        <li><strong>传输加密：</strong>使用TLS 1.3加密所有数据传输</li>
        <li><strong>存储加密：</strong>数据库采用AES-256加密</li>
        <li><strong>访问控制：</strong>基于角色的权限管理</li>
        <li><strong>审计日志：</strong>完整的操作日志记录</li>
        <li><strong>备份策略：</strong>多地域自动备份</li>
      </ul>
      <p>我们通过了ISO 27001、SOC 2等安全认证。</p>
    `,
    categoryId: 'security',
    views: 2789,
    helpful: 189,
    unhelpful: 28
  }
]

// 工单系统相关
const showCreateTicket = ref(false)
const ticketStatusFilter = ref('')
const ticketPriorityFilter = ref('')
const ticketTypeFilter = ref('')

const newTicket = ref({
  title: '',
  type: '',
  priority: 'medium',
  description: '',
  attachments: []
})

const ticketRules = {
  title: [{ required: true, message: '请输入工单标题', trigger: 'blur' }],
  type: [{ required: true, message: '请选择工单类型', trigger: 'change' }],
  priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
  description: [{ required: true, message: '请输入问题描述', trigger: 'blur' }]
}

const ticketList = [
  {
    id: 'T001',
    title: '登录页面加载缓慢',
    description: '用户反馈登录页面加载时间超过10秒，影响使用体验',
    type: 'technical',
    priority: 'high',
    status: 'processing',
    assignee: '张工程师',
    createdAt: new Date('2024-01-15'),
    updatedAt: new Date('2024-01-16')
  },
  {
    id: 'T002',
    title: '希望增加数据导出功能',
    description: '希望能够支持将报表数据导出为Excel格式',
    type: 'feature',
    priority: 'medium',
    status: 'pending',
    assignee: null,
    createdAt: new Date('2024-01-14'),
    updatedAt: new Date('2024-01-14')
  },
  {
    id: 'T003',
    title: '账户余额显示错误',
    description: '账户页面显示的余额与实际充值金额不符',
    type: 'bug',
    priority: 'urgent',
    status: 'resolved',
    assignee: '李客服',
    createdAt: new Date('2024-01-13'),
    updatedAt: new Date('2024-01-15')
  }
]

// 计算属性
const filteredFAQs = computed(() => {
  let filtered = faqList
  
  // 按分类筛选
  if (selectedCategory.value) {
    filtered = filtered.filter(faq => faq.categoryId === selectedCategory.value)
  }
  
  // 按搜索关键词筛选
  if (faqSearch.value) {
    const keyword = faqSearch.value.toLowerCase()
    filtered = filtered.filter(faq => 
      faq.question.toLowerCase().includes(keyword) ||
      faq.answer.toLowerCase().includes(keyword)
    )
  }
  
  return filtered
})

const filteredTickets = computed(() => {
  let filtered = ticketList
  
  if (ticketStatusFilter.value) {
    filtered = filtered.filter(ticket => ticket.status === ticketStatusFilter.value)
  }
  
  if (ticketPriorityFilter.value) {
    filtered = filtered.filter(ticket => ticket.priority === ticketPriorityFilter.value)
  }
  
  if (ticketTypeFilter.value) {
    filtered = filtered.filter(ticket => ticket.type === ticketTypeFilter.value)
  }
  
  return filtered
})

// 方法
const switchTab = (tabId: string) => {
  activeTab.value = tabId
}

// 聊天相关方法
const sendMessage = () => {
  if (!currentMessage.value.trim()) return
  
  // 添加用户消息
  chatMessages.value.push({
    id: Date.now(),
    type: 'user',
    content: currentMessage.value,
    timestamp: new Date()
  })
  
  const userMessage = currentMessage.value
  currentMessage.value = ''
  
  // 滚动到底部
  nextTick(() => {
    scrollToBottom()
  })
  
  // 模拟机器人回复
  isTyping.value = true
  setTimeout(() => {
    isTyping.value = false
    chatMessages.value.push({
      id: Date.now(),
      type: 'bot',
      content: getBotResponse(userMessage),
      timestamp: new Date()
    })
    nextTick(() => {
      scrollToBottom()
    })
  }, 2000)
}

const sendQuickQuestion = (question: string) => {
  currentMessage.value = question
  sendMessage()
}

const getBotResponse = (message: string) => {
  // 简单的关键词匹配回复
  const lowerMessage = message.toLowerCase()
  
  if (lowerMessage.includes('密码') || lowerMessage.includes('重置')) {
    return '您可以在登录页面点击"忘记密码"来重置密码，或者我可以帮您转接到技术支持。'
  } else if (lowerMessage.includes('价格') || lowerMessage.includes('费用')) {
    return '我们有多种套餐可供选择，具体价格请查看我们的产品页面，或者我可以为您安排销售顾问详细介绍。'
  } else if (lowerMessage.includes('技术') || lowerMessage.includes('支持')) {
    return '技术支持热线：400-123-4567，工作时间：周一至周五 9:00-18:00。您也可以提交工单，我们会尽快处理。'
  } else {
    return '感谢您的咨询！我已经记录了您的问题，稍后会有专业客服为您详细解答。如果您有紧急问题，请拨打客服热线 400-123-4567。'
  }
}

const clearChat = () => {
  chatMessages.value = [
    {
      id: 1,
      type: 'bot',
      content: '您好！欢迎使用IKeySoft客户服务，我是您的专属客服助手。请问有什么可以帮助您的吗？',
      timestamp: new Date()
    }
  ]
}

const attachFile = () => {
  // 文件上传逻辑
  console.log('附加文件')
}

const scrollToBottom = () => {
  if (chatMessages_ref.value) {
    chatMessages_ref.value.scrollTop = chatMessages_ref.value.scrollHeight
  }
}

// FAQ相关方法
const filterByCategory = (categoryId: string) => {
  selectedCategory.value = categoryId
}

const toggleFAQ = (faqId: number) => {
  const index = expandedFAQs.value.indexOf(faqId)
  if (index > -1) {
    expandedFAQs.value.splice(index, 1)
  } else {
    expandedFAQs.value.push(faqId)
  }
}

const rateFAQ = (faqId: number, helpful: boolean) => {
  const faq = faqList.find(f => f.id === faqId)
  if (faq) {
    if (helpful) {
      faq.helpful++
      ElMessage.success('感谢您的反馈！')
    } else {
      faq.unhelpful++
      ElMessage.info('感谢您的反馈，我们会持续改进！')
    }
  }
}

const contactSupport = (question: string) => {
  activeTab.value = 'chat'
  currentMessage.value = `关于"${question}"，我需要更多帮助`
  nextTick(() => {
    sendMessage()
  })
}

const getCategoryName = (categoryId: string) => {
  const category = faqCategories.find(c => c.id === categoryId)
  return category ? category.name : '其他'
}

// 工单相关方法
const createTicket = () => {
  // 创建工单逻辑
  console.log('创建工单:', newTicket.value)
  showCreateTicket.value = false
  ElMessage.success('工单创建成功！')
  
  // 重置表单
  newTicket.value = {
    title: '',
    type: '',
    priority: 'medium',
    description: '',
    attachments: []
  }
}

const viewTicket = (ticketId: string) => {
  console.log('查看工单:', ticketId)
}

const updateTicket = (ticketId: string) => {
  console.log('更新工单:', ticketId)
}

const closeTicket = (ticketId: string) => {
  console.log('关闭工单:', ticketId)
  ElMessage.success('工单已关闭')
}

// 工具方法
const formatTime = (date: Date) => {
  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
}

const formatDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN')
}

const getStatusType = (status: string) => {
  const types = {
    pending: '',
    processing: 'warning',
    resolved: 'success',
    closed: 'info'
  }
  return types[status] || ''
}

const getStatusText = (status: string) => {
  const texts = {
    pending: '待处理',
    processing: '处理中',
    resolved: '已解决',
    closed: '已关闭'
  }
  return texts[status] || status
}

const getPriorityType = (priority: string) => {
  const types = {
    low: 'info',
    medium: '',
    high: 'warning',
    urgent: 'danger'
  }
  return types[priority] || ''
}

const getPriorityText = (priority: string) => {
  const texts = {
    low: '低',
    medium: '中',
    high: '高',
    urgent: '紧急'
  }
  return texts[priority] || priority
}

const getTypeText = (type: string) => {
  const texts = {
    technical: '技术支持',
    feature: '功能请求',
    bug: 'Bug报告',
    account: '账户问题'
  }
  return texts[type] || type
}

// 生命周期
onMounted(() => {
  // 初始化聊天区域滚动
  nextTick(() => {
    scrollToBottom()
  })
})
</script>

<style scoped>
.service-page {
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 8rem 0 4rem;
  color: white;
  text-align: center;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-description {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* 服务导航 */
.service-nav {
  padding: 4rem 0;
  background: white;
}

.nav-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.nav-tab {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.nav-tab:hover,
.nav-tab.active {
  border-color: #667eea;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
  transform: translateY(-4px);
}

.tab-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.tab-content {
  flex: 1;
}

.tab-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.tab-description {
  color: #666;
  line-height: 1.6;
}

/* 在线客服 */
.chat-section {
  padding: 4rem 0;
  background: #f8fafc;
}

.chat-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  height: 600px;
}

.chat-sidebar {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.service-info {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 1.5rem;
}

.info-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.service-hours {
  margin-bottom: 1rem;
}

.hour-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.hour-label {
  color: #666;
}

.hour-time {
  color: #333;
  font-weight: 500;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.quick-questions {
  flex: 1;
}

.quick-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.question-item {
  padding: 0.8rem;
  background: #f8fafc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  color: #666;
}

.question-item:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.chat-main {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.agent-info {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.agent-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.agent-status {
  font-size: 0.8rem;
  color: #10b981;
}

.agent-status.online::before {
  content: '●';
  margin-right: 0.3rem;
}

.chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.message {
  display: flex;
  gap: 0.8rem;
}

.user-message {
  flex-direction: row-reverse;
}

.message-avatar {
  flex-shrink: 0;
}

.message-content {
  flex: 1;
  max-width: 70%;
}

.user-message .message-content {
  display: flex;
  justify-content: flex-end;
}

.message-bubble {
  padding: 0.8rem 1rem;
  border-radius: 12px;
  position: relative;
}

.bot-message .message-bubble {
  background: #f1f5f9;
  color: #333;
}

.user-message .message-bubble {
  background: #667eea;
  color: white;
}

.message-text {
  line-height: 1.5;
}

.message-time {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.3rem;
}

.typing-indicator {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  background: #666;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

.chat-input {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.input-area {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
}

.input-area .el-textarea {
  flex: 1;
}

.input-actions {
  display: flex;
  gap: 0.5rem;
}

/* FAQ知识库 */
.faq-section {
  padding: 4rem 0;
  background: #f8fafc;
}

.faq-header {
  margin-bottom: 2rem;
}

.search-area {
  margin-bottom: 1.5rem;
}

.category-filter {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.faq-stats {
  margin-bottom: 1.5rem;
  color: #666;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.faq-question {
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: #f8fafc;
}

.question-content {
  flex: 1;
}

.question-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.question-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.category-tag {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
}

.view-count {
  color: #999;
  font-size: 0.8rem;
}

.question-toggle {
  transition: transform 0.3s ease;
}

.question-toggle.rotated {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.answer-content {
  line-height: 1.6;
  color: #555;
  margin-bottom: 1rem;
}

.answer-content ol,
.answer-content ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.answer-content li {
  margin-bottom: 0.3rem;
}

.answer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

.helpful-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.helpful-text {
  color: #666;
  font-size: 0.9rem;
}

/* 工单系统 */
.ticket-section {
  padding: 4rem 0;
  background: #f8fafc;
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.section-description {
  color: #666;
  font-size: 1.1rem;
}

.ticket-filters {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-label {
  color: #666;
  font-weight: 500;
}

.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ticket-item {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.ticket-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.ticket-meta {
  display: flex;
  gap: 1rem;
  color: #666;
  font-size: 0.9rem;
}

.ticket-status {
  display: flex;
  gap: 0.5rem;
}

.ticket-description {
  color: #555;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.ticket-details {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #666;
  font-size: 0.9rem;
}

.ticket-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
}

/* 联系方式 */
.contact-section {
  padding: 6rem 0;
  background: white;
}

.contact-content {
  text-align: center;
  margin-bottom: 3rem;
}

.contact-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.contact-description {
  font-size: 1.1rem;
  color: #666;
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.method-item:hover {
  border-color: #667eea;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
  transform: translateY(-4px);
}

.method-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.method-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.method-description {
  font-size: 1.1rem;
  color: #667eea;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.method-time {
  color: #999;
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .nav-tabs {
    grid-template-columns: 1fr;
  }

  .chat-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .chat-sidebar {
    order: 2;
    height: auto;
  }

  .chat-main {
    height: 500px;
  }

  .contact-methods {
    grid-template-columns: 1fr;
  }

  .ticket-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .nav-tab {
    flex-direction: column;
    text-align: center;
  }

  .chat-layout {
    gap: 1rem;
  }

  .message-content {
    max-width: 85%;
  }

  .ticket-header {
    flex-direction: column;
    gap: 1rem;
  }

  .ticket-details {
    flex-direction: column;
    gap: 0.5rem;
  }

  .ticket-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .answer-actions {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .helpful-section {
    flex-wrap: wrap;
  }
}
</style>